<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" :style="{'height': formHeight}" class="edit-form">
      <el-row>
        <el-col :span="22">
          <el-form-item label="店铺信息" prop="sysStoresId">
            <el-select
              ref="sysStoresId"
              v-model="form.sysStoresId"
              filterable
              remote
              reserve-keyword
              default-first-option
              style="width: 100%"
              placeholder="请输入店铺名称检索"
              :remote-method="getSysStoresList"
              :loading="sysStoresLoading">
              <el-option
                v-for="item in sysStoresOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="商户名称" prop="name">
            <el-input ref="name" v-model="form.name" placeholder="请输入餐饮商户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="商户类型" prop="type">
            <el-select ref="type" v-model="form.type" placeholder="请选择餐饮商户类型">
              <el-option
                v-for="dict in dict.type.shop_restaurant_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.shop_business_status"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="缩略图" prop="imgAbbrev">
            <image-upload v-model="form.imgAbbrev" :biz-id="restId" biz-code="SHOP_REST_ABBREV" :limit="1" @input="imgAbbrevChange"></image-upload>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="轮播图" prop="imgDetail">
            <image-upload v-model="form.imgDetails" :biz-id="restId" biz-code="SHOP_REST_DETAIL" zoom="0"></image-upload>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="预定须知" prop="notice">
            <el-input v-model="form.notice" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="商户地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入餐饮商户地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="form.longitude" placeholder="请输入经度" />
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input v-model="form.latitude" placeholder="请输入纬度" />
          </el-form-item>
          <el-form-item>
            <el-card>
              <a href="https://lbs.qq.com/getPoint/" target="_blank" style="color: blue; width: 100px; float: inside">点我取点 </a>
              或点击右侧地图自动选点 <br/>例:【38.145905,114.516479】38.145905是维度，114.516479是经度
            </el-card>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <!--            <el-card>-->
          <tx-map @selected="mapSelected" image="" height="500px;" :latitude="form.latitude" :longitude="form.longitude"/>
          <!--            </el-card>-->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="亮点-多选" prop="feature">
            <el-tooltip content="可自定义输入亮点" placement="top">
              <el-select
                v-model="feature"
                multiple
                filterable
                allow-create
                default-first-option
                style="width: 100%"
                placeholder="请选择或输入亮点">
                <el-option
                  v-for="item in featureOptions"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-tooltip>
<!--            <el-input v-model="form.feature" type="textarea" placeholder="请输入亮点-建议使用 @@ 符号分隔多项" title="建议使用 @@ 符号分隔多项"/>-->
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="服务电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入服务电话" :maxlength="13"/>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="推荐指数" prop="recValue" v-hasPermi="['shop:restaurant:rec']">
            <el-input v-model="form.recValue" placeholder="请输入推荐指数" />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="商户描述">
            <editor v-model="form.content" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getRestaurant, addRestaurant, updateRestaurant } from "@/api/shop/restaurant";
import {getStores, listStoresByDS} from "@/api/system/stores";

export default {
  name: "RestaurantAdd",
  dicts: ['shop_restaurant_type', 'shop_business_status'],
  data() {
    return {
      // 表单的高度
      formHeight: document.documentElement.scrollHeight - 160 + "px",
      // 遮罩层
      loading: true,
      // 商店id
      restId: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, trigger: "blur", message: "请输入名称" }
        ],
        sysStoresId: [
          { required: true, trigger: "blur", message: "请选择店铺信息" }
        ],
        imgAbbrev: [
          { required: true, trigger: "blur", message: "请上传缩略图" }
        ],
        imgDetails: [
          { required: true, trigger: "blur", message: "请上传轮播图" }
        ],
      },
      // 商店数据源
      sysStoresOptions: [],
      // 商店选择遮罩
      sysStoresLoading: false,
      // 亮点
      featureOptions: [{
        value: '快餐美食'
      }],
      // 亮点接收设置
      feature: [],
    };
  },
  created() {
    this.reset();
    const restId = this.$route.query && this.$route.query.restId;
    if (restId) {
      this.restId = Number(restId)
      this.getInfo(restId);
    }
    this.getSysStoresList();
  },
  methods: {
    /** 查询餐饮商户 */
    getInfo(id) {
      getRestaurant(id).then(response => {
        this.form = response.data;
        this.feature = this.stringToList(this.form.feature);
      });
    },
    /** 查询基本店铺列表 */
    getSysStoresList(query) {
      if (query !== '') {
        this.sysStoresLoading = true;
        const queryParams = {
          name: query
        }
        listStoresByDS(queryParams).then(response => {
          this.sysStoresOptions = response.rows;
          this.sysStoresLoading = false;
        });
      }
    },
    // 取消按钮
    cancel() {
      // this.open = false;
      this.reset();
      const obj = { path: "/shop/restaurant/restaurant" };
      this.$tab.closeOpenPage(obj);
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sysStoresId: null,
        name: null,
        type: null,
        imgAbbrev: null,
        imgDetails: null,
        notice: null,
        address: null,
        longitude: null,
        latitude: null,
        price: null,
        status: "1",
        feature: null,
        content: null,
        phone: null,
        recValue: null,
        isDel: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid, object) => {
        if (valid) {
          this.buildOther();
          if (this.form.id != null) {
            updateRestaurant(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addRestaurant(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.form.id = response.data.id;
              this.restId = response.data.id;
            });
          }
        } else {
          let str = []
          for (let key in object) {
            object[key].map(item => {
              str.push(item.message)
            })
            let dom = this.$refs[Object.keys(object)[0]]
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0]
              break
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            });
          }
          this.$modal.msgError(str.join(', '));
        }
      });
    },
    async buildOther() {
      this.form.feature = this.listToString(this.feature);
    },
    /** 提取url到form，用于保存 */
    imgAbbrevChange(val) {
      if (val && val.length) {
        this.form.imgAbbrev = val[0].zoomUrl || val[0].url;
      }
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || "@@";
      for (let i in list) {
        strs += list[i] + separator;
      }
      return strs !== '' ? strs.substr(0, strs.length - 2) : '';
    },
    // 对象转成指定字符串分隔
    stringToList(string, separator) {
      if (string) {
        separator = separator || "@@";
        var list = string.split(separator);
        return list;
      }
      return [];
    },
    mapSelected(point) {
      this.form.latitude = point.lat;
      this.form.longitude = point.lng;
    }
  }
};
</script>
<style lang="scss">
.edit-form {
  overflow-y: auto;
}
</style>
